<template>
	<div class="trigger-configuration-del" v-loading="loading" @click="isShowMessageTemplate = false">
		<div class="trigger-configuration-del-rule trigger-step">
			<div class="trigger-configuration-del-rule-title">
				<div>删除规则</div>
				<div class="trigger-configuration-tip" v-if="isShowDelTip">
					<i class="el-icon-question tip-icon"></i>
					<div class="tip-content">请至少设置一个条件</div>
				</div>
			</div>
			<div class="trigger-configuration-del-rule-tip">选择要删除的数据（查询有多条数据将批量删除）(需将表单字段设置了"支持高级搜索"才可选择)</div>
			<conditionConfig
				v-if="Object.keys(state.currentNodeInfoFront.options.fieldOptions || {}).length"
                :title="'过滤的条件（触发应用 > 执行应用）'"
                v-model="state.currentNodeInfoFront.options.fieldOptions.delete"
                :filedList="filedList"
				:fromFieldList="fromFieldList"
                @change="changeCondition"
				@selectChange="selectChange"
            ></conditionConfig>
		</div>
		<div class="trigger-configuration-del-inform trigger-step">
			<div class="trigger-configuration-del-inform-title">
				<div>删除通知</div>
				<div class="trigger-configuration-tip" v-if="Object.keys(state.currentNodeInfoFront.options.fieldOptions || {}).length && !state.currentNodeInfoFront.options.fieldOptions.message">
					<i class="el-icon-question tip-icon"></i>
					<div class="tip-content">必须填写</div>
				</div>
			</div>
			<div class="trigger-configuration-del-inform-content">
				<div class="trigger-configuration-del-inform-content-header">
					<div class="trigger-configuration-del-inform-content-header-title">通知对象</div>
					<div class="trigger-configuration-del-inform-content-header-template" @click.stop="isShowMessageTemplate = !isShowMessageTemplate">预览模板</div>
					<div class="system-message-template" v-if="isShowMessageTemplate">
            			<h3>{{ $t('common.connector.trigger.msgTemplate.title') }}</h3>
            			<div class="desc">{{ $t('common.connector.trigger.msgTemplate.desc') }}</div>
            			<div class="template-content-item">{{ $t('common.connector.trigger.msgTemplate.item1') }}</div>
            			<div class="template-content-item">{{ $t('common.connector.trigger.msgTemplate.item2') }}</div>
            			<div class="template-content-item">{{ $t('common.connector.trigger.msgTemplate.item3') }}</div>
            			<div class="template-content-item">{{ $t('common.connector.trigger.msgTemplate.item4') }}</div>
            			<div class="template-content-item">{{ $t('common.connector.trigger.msgTemplate.item5') }}</div>
            			<div class="template-content-item">{{ $t('common.connector.trigger.msgTemplate.item6') }}</div>
            			<div class="date">2023-01-01 12:12:13</div>
        			</div>
				</div>
				<div class="trigger-configuration-del-inform-content-content" v-if="Object.keys(state.currentNodeInfoFront.options.fieldOptions || {}).length">
					<el-select v-model="selectedMessageList" multiple @change="messageChange">
						<el-option v-for="i in messageList" :value="i.enName" :label="i.cnName" :key="i.enName"></el-option>	
					</el-select>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { getFieldMapping } from '@src/modules/trigger/api/trigger.js';
import { getDynamicMessageField } from '@src/api/Message';
import state from '@src/modules/trigger/view/setting/util/state.js';
import conditionConfig from './conditionConfig.vue';
import actionMixin from '../mixins/actionMixin';

export default {
	name: 'delConfig',
    components: {
        conditionConfig,
    },
	mixins: [actionMixin],
	data() {
		return {
			loading: false,
			filedList: [],
			fromFieldList: [],
			messageList: [], // 消息通知列表
			selectedMessageList: [], // 选中的消息通知列表
			isShowMessageTemplate: false,
		};
	},
	computed: {
		state() {
			return state;
		},
		isShowDelTip() {
			return !this.requiredCheck(state.currentNodeInfoFront.options?.fieldOptions?.delete, 'del')
		}
	},
	created() {
		this.initData();
	},
	methods: {
		selectChange(val, index) {
            if (val && val?.valueType == '3') {
                // 判断当前数据是否存在兼容性字段
                const existingIndex = this.state._compatibilityList.findIndex(item => item.index === index && item.nodeUniqueId === this.state.currentNodeInfoFront.uniqueId)
                // 如果不存在，则添加到兼容性列表中
                if (existingIndex === -1) {
                    this.state._compatibilityList.push({
                        '_isExecuteActionDeleteCondition': true,
                        'nodeUniqueId': this.state.currentNodeInfoFront.uniqueId,
						index: index,
                    })
                }
            }
		},
		changeCondition(val) {
            this.$set(state.currentNodeInfoFront.options.fieldOptions, 'delete', val);
        },
		messageChange(val) {
			let paasReceiver = '';
			let selectList = []
			val.forEach(item => {
				selectList.push({
					id: this.messageList.find(i => i.enName === item).enName,
					name: this.messageList.find(i => i.enName === item).cnName,
					type: this.messageList.find(i => i.enName === item).fieldType === '4' ? '4' : '6',
				});
			});
			paasReceiver = JSON.stringify(selectList);
			this.$set(state.currentNodeInfoFront.options, 'fieldOptions', {
				...state.currentNodeInfoFront.options?.fieldOptions,
				message: {
					paasReceiver,
				}
			});
		},
		initData() {
			this.loading = true;
			Promise.all([getFieldMapping({
				fromApiIdList: (state.parentNodeApiIdList || []).filter(apiId => apiId !== null && apiId !== 'message' && apiId !== 'code'),
				toApiId: state.currentNodeInfoFront.options?.apiId,
			}), getDynamicMessageField({
				apiIdList: [
					...state.parentNodeApiIdList.filter(apiId => apiId !== null && apiId !== 'message' && apiId !== 'code'),
					state.currentNodeInfoFront.options?.apiId,
				].filter(apiId => apiId !== null),
				side: 0,
			})]).then(res => {
				if (res[0].status === 0) {
					if (!state.currentNodeInfoFront.options?.fieldOptions?.delete) {
						this.$set(state.currentNodeInfoFront.options, 'fieldOptions', {
							delete: [
								{
									toEnName: '',
									operate: '',
									valueType: '',
									value: [],
								},
							],
							message: {
								paasReceiver: '',
							},
						});
					} else {
						this.selectedMessageList = JSON.parse(state.currentNodeInfoFront.options?.fieldOptions?.message?.paasReceiver || '[]').map(i => {
							return i?.id;
						})
					}
					this.filedList = this.changeChildrenData(res[0].data.selectFieldList);
					this.fromFieldList = this.changeChildrenKey(this.changeChildrenData(res[0].data.fromFieldList));
				}
				if (res[1].status === 0) {
					this.messageList = res[1]?.data;
					this.messageList.push({
						cnName: '系统管理员',
						enName: '1',
						fieldType: '4',
					})
				}
			}).catch(e => {
				console.log(e);
			}).finally(() => {
				this.loading = false;
			})
		}
	},
};
</script>

<style scoped lang="scss">
.trigger-step {
	position: relative;
	padding-left: 20px;
}

.trigger-step::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	width: 8px;
	height: 8px;
	background-color: #d4d7de;
	border-radius: 50%;
}

.trigger-step::after {
	content: '';
	position: absolute;
	left: 3.5px;
	top: 16px;
	width: 1px;
	height: calc(100% - 8px);
	background-color: #bfbfbf;
}

.trigger-configuration-tip {
	display: flex;
	align-items: center;
	font-size: 12px;
	font-weight: 400;
	.tip-icon {
		color: #f56c6c;
		margin-right: 5px;
	}
	.tip-content {
		color: #f56c6c;
	}
}

.trigger-configuration-del {
	position: relative;
	height: 100%;
	&-rule,
	&-inform {
		&-title {
			height: 22px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: 500;
		}
	}
	&-rule {
		padding-bottom: 24px;
		&-tip {
			height: 20px;
			font-size: 12px;
			color: #8c8c8c;
		}
	}
	&-inform {
		&-content {
			&-header {
				display: flex;
				height: 32px;
				align-items: center;
				justify-content: space-between;
				margin-top: 8px;
				position: relative;
				&-template {
					color: $color-primary;
					cursor: pointer;
				}
			}
			&-content {
				::v-deep .el-select {
					width: 100%;
				}
			}
		}
	}
	.system-message-template{
		position: absolute;
		z-index: 1;
		bottom: 30px;
		right: 0;
    	padding: 24px 0 24px 28px;
    	border-radius: 4px;
    	background-color: #fff;
    	min-width: 360px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border: 1px solid #EBEEF5;
    	h3{
      		margin-bottom: 0;
    	}
    	.desc{
      		font-size: 13px;
    	}
    	.template-content-item{
      		font-size: 14px;
      		line-height: 24px;
    	}
    	.date{
      		margin-top: 20px;
    	}
  	}
	.system-message-template::after {
		content: "";
    	position: absolute;
    	top: 100%;  /* At the bottom of the tooltip */
    	right: 5%;
   	 	margin-left: -5px;
    	border-width: 5px;
    	border-style: solid;
    	border-color: #fff transparent transparent transparent;
	}
}
</style>
